
/*编辑器元素*/
var offsetTopOfScreen=0;
var offsetlefOfScreen=0;
var firstMouseMove=0;
$(document).ready(function(){



    var canvas1 = $('#layer1')[0];
    var ctx1 = canvas1.getContext('2d');
    var gridColor = '#000';
    var highlightColor = 'rgba(173, 216, 230, 0.5)'; // Light blue color
    var gridSize = 25;
    var gridSpacing = 10;
    var rowSpacing = 15;
    var isSelecting = false; // Variable to control when to track mouse movements
    var selection = { rows: 0, columns: 0 }; // Variable to store the current selection
    
    function drawGrid() {
      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
      ctx1.beginPath();
      for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
          ctx1.rect(
            gridSpacing + j * (gridSize + gridSpacing), 
            rowSpacing + i * (gridSize + rowSpacing),
            gridSize, 
            gridSize
          );
        }
      }
      ctx1.strokeStyle = gridColor;
      ctx1.stroke();
    }
  
    function highlightSquares(x, y) {
      var column = Math.floor((x - gridSpacing) / (gridSize + gridSpacing));
      var row = Math.floor((y - rowSpacing) / (gridSize + rowSpacing));
      ctx1.fillStyle = highlightColor;
      for (let i = 0; i <= row; i++) {
        for (let j = 0; j <= column; j++) {
          ctx1.fillRect(
            gridSpacing + j * (gridSize + gridSpacing), 
            rowSpacing + i * (gridSize + rowSpacing),
            gridSize, 
            gridSize
          );
        }
      }
      selection.rows = row + 1;
      selection.columns = column + 1;
    }
    
    $('#layer1').mousedown(function(e) {
      isSelecting = true; // Start selecting
      $('#selectionInfo').text(''); // Clear the selection info text
      drawGrid(); // Clear any previous selection
    });
  
    $('#layer1').mousemove(function(e) {
      if (!isSelecting) return; // Only track mouse movement if selecting
      
      var rect = canvas1.getBoundingClientRect();
      var mouseX = e.clientX - rect.left;
      var mouseY = e.clientY - rect.top;
      drawGrid(); // Redraw grid to clear previous highlights
      highlightSquares(mouseX, mouseY);
    });
  
    $('#layer1').mouseup(function(e) {
      isSelecting = false; // Stop selecting
      
      // Display the selection info
      $('#js/HElement2.js').text('Selected Rows: ' + selection.rows + ', Columns: ' + selection.columns);
    });
  
    $('#showLayer1').click(function() {
      $('#layer2').hide();
      $('#layer1').show();
    });
  
    $('#showLayer2').click(function() {
      $('#layer1').hide();
      $('#layer2').show();
    });
  
    drawGrid(); // Initial grid draw


});
 	



